<template>
  <div id='goods_detail'>
    <div class="container">
      <div class='commodity-title'>
        <p></p>
        <h3>商品信息</h3>
      </div>
      <div class="detail-table">
        <Row>
          <Col span="12" class="detail-table__col">所属门店：{{channelDeatil.shopName}}</Col>
          <Col span="12" class="detail-table__col">所属类型：{{goodsDetail.typeName1}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">对应分类：{{goodsDetail.typeName2}}</Col>
          <Col span="12" class="detail-table__col">商品分类：{{goodsDetail.parentCategoryName}}-{{goodsDetail.categoryName}}</Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">是否虚拟商品：{{goodsDetail.goodsType === 0 ? '否' : goodsDetail.goodsType === 1 ? '是': ''}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">商品名称：{{goodsDetail.skuName}}</Col>
          <Col span="12" class="detail-table__col">副标题：{{channelDeatil.title}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">商品编码：{{goodsDetail.barcode}}</Col>
          <Col span="12" class="detail-table__col">商品条码：{{goodsDetail.skuId}}</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">商品单位：{{goodsDetail.goodsUnit === 0 ? '个': goodsDetail.goodsUnit === 1 ? '枚' : goodsDetail.goodsUnit === 2 ? '份':''}}</Col>
          <Col span="12" class="detail-table__col">商品价格：{{goodsDetail.standardPrice}}元</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">可售库存：{{channelDeatil.inventory === -1 ? '不限': channelDeatil.inventory}}</Col>
          <Col span="12" class="detail-table__col">平台价：{{channelDeatil.standPrice}}元</Col>
        </Row>
        <Row>
          <Col span="12" class="detail-table__col">上架时间：{{channelDeatil.listingAt}}</Col>
          <Col span="12" class="detail-table__col">下架时间：{{channelDeatil.delistingAt}}</Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">销售渠道：{{channelDeatil.channelId === '1' ? '收银台': channelDeatil.channelId === '2' ? '一体机': channelDeatil.channelId === '4' ? '微信商城': channelDeatil.channelId === '8' ? '移动设备':''}}</Col>
        </Row>
        <Row>
          <Col span="24" class="detail-table__col">
            <table>
              <tr>
                <td width="60" valign="top">商品图片：</td>
                <td class="detail-table-multimedia">
                  <div>
                    <img :src="channelDeatil.thumbnail ? channelDeatil.thumbnail: ''" alt="" style="width: 96px;height: 96px;margin-right:20px">
                  </div>
                </td>
              </tr>
            </table>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { getChannelDetail } from '@/api/commondity/index'
export default {
  name: 'goods_detail',
  data () {
    return {
      goodsDetail: '', // 系统模块
      channelDeatil: '' // 渠道模块
    }
  },
  methods: {
    getDetail () {
      getChannelDetail({
        merchantId: this.$store.state.user.merchantId,
        channelGoodsId: this.$route.params.id
      }).then(res => {
        const result = res.data || {}
        if (result.status === 200) {
          this.goodsDetail = result.data.goods
          this.goodsDetail.typeName1 = this.goodsDetail.goodsKindList[0].typeName
          this.goodsDetail.typeName2 = this.goodsDetail.goodsKindList[1].typeName
          this.channelDeatil = result.data.channelGoods
          this.channelDeatil.standPrice = this.channelDeatil.goodsPrices[0].amount.toFixed(2)
          this.goodsDetail.standardPrice = this.goodsDetail.standardPrice.toFixed(2)
        } else {
          this.$Message.error(`${result.error}`)
        }
      })
    }
  },
  mounted () {
    this.getDetail()
  }
}
</script>

<style lang="less">
@import '~@/assets/stylus/detail-table.less';
#goods_detail{
  padding: 25px 100px;
  .container {
    margin-bottom: 70px;
    .commodity-title {
      display: flex;
      margin-bottom: 30px;
      p {
        width: 8px;
        height: 20px;
        margin-right: 10px;
        background-color: #2d8cf0;
      }
    }
  }
}
</style>
